<template>
  <div class="main relative">
    <div class="environment-header">
      <zz-back class="left" name="塔吊监控" :title=pname style="padding: 0" v-if="this.currentUser.type === 1"></zz-back>
      <p class="title left color" v-else>塔吊监控</p>
      <div class="head-right right" v-if="this.currentUser.type !== 1 && projectManageMmaintain">
        <button class="button-block" @click="files()">新增塔吊</button>
        <button class="button-block" @click="refresh">刷新</button>
      </div>
    </div>
    <div class="left-content left">
      <div class="top-tit left-top-tit">
        塔吊监控
      </div>
      <div class="elevatorList">
        <div class="elevator-box" v-for="(item, index) in elevatorList">
          <div class="item-con">
            <div class="topTip" v-if="item.isonline === 0">离线</div>
            <div class="topTip" v-if="item.status === 2">离场</div>
            <div class="topTip" v-if="item.status === 1 && item.isTodayOnline !==1">未开机</div>
            <div>
              <i class="iconfont icon-juxingkaobei elevatorIcon" :class="{'offIcon': item.status !== 1 || item.isonline !== 1}"></i>
              <span>{{item.deviceName}}</span>
            </div>
            <div v-if="item.status === 2" class="lichang">
              <div class="leftside">
                <div>进场日期：<span>{{item.enterTime}}</span></div>
                <div>离场日期：<span>{{item.exitTime}}</span></div>
              </div>
              <div  class="rightside">
                <span>{{item.dateInterval}}</span>
                <div>在场天数</div>
              </div>
            </div>
            <div class="today-info" v-if="item.status !== 2">
              <table>
                <tr>
                  <td>{{item.sumweight || '--'}}</td>
                  <td :class="{'red': item.overweightcount}">{{item.maxweight || '--'}}</td>
                  <td :class="{'red': item.isonline !== 0}">{{item.alarmcount || '--'}}</td>
                </tr>
                <tr>
                  <td>今日载重</td>
                  <td>最大载重</td>
                  <td>报警次数</td>
                </tr>
              </table>
            </div>
            <div class="footer">
              <i class="iconfont icon-gongren1 ml10"></i>
              <span class="driver">{{item.driverName}}</span>
              <button class="right pointer" @click="gopage('/tcMonitor/towerProjectRecord', 'day', item.referId, item.deviceName, projectId, pjName)">监控记录</button>
              <button class="right pointer" @click="files(item)">设备档案</button>
            </div>
          </div>
        </div>
        <!-- <div class="addBox elevator-box">
          <div class="item-con" @click="showDialog = true">
            <i class="iconfont icon-plus"></i>
          </div>
        </div> -->
      </div>
    </div>
    <div class="right-content right">
      <div class="top-tit">
        监控统计
      </div>
      <div class="right-main mr20">
        <!-- 饼状图 -->
        <div>近7天塔吊监控报警统计</div>
        <div style="width: 100%; height: 200px;" ref="sevenDaysWarn" class="mt20"></div>
        <!-- 柱形图 -->
        <div class="mt20">每日塔吊监控报警次数(近7天)</div>
        <div style="width: 100%; height: 200px;" ref="everyWarnTimes"></div>
        <button class="button-block getmoreBtn" @click="gopage('/tcMonitor/allTowerRecord','day','','',projectId)">查看更多统计</button>
      </div>
    </div>
    <!-- 吊塔档案 -->
    <zz-dialog
      :title = dialogTitle
      :visible = showDialog1
      :showConfirm = false
      :reset = true
      :showFoot = "false"
      @close="close">
      <div class="dialog-box">
        <div style="width: 898px; height: 590px; position: relative;">
          <towerInfo :towerItem="towerItem" :projectId="projectId" @close="close" @refresh="refresh"></towerInfo>
        </div>
      </div>
    </zz-dialog>
    <!-- 塔吊档案-不可修改 -->
    <zz-dialog
      :title = dialogTitle
      :visible = showDialog2
      :showConfirm = false
      :reset = true
      :showFoot = "false"
      @close="close">
      <div class="dialog-box">
        <div style="width: 898px; height: 590px; position: relative;">
          <noeditTowerInfo :towerItem="towerItem" :projectId="projectId" @close="close" @refresh="refresh"></noeditTowerInfo>
        </div>
      </div>
    </zz-dialog>
  </div>
</template>

<script>
import Vue from 'vue'
import { mapGetters } from 'vuex'
import towerInfo from './towerInfo'
import noeditTowerInfo from './noeditTowerInfo'
import { getMonitorList, getTowerAlarmLastWeek } from '../../../service/api.js'

import bar from './bar.js'
import pie from './pie.js'

export default {
  name: 'projectTower',
  components: {
    towerInfo,
    noeditTowerInfo
  },
  computed: {
      ...mapGetters({
        currentUser: 'currentUser'
      })
    },
    data () {
      return {
        projectManageMmaintain: '', // 是否具有维护权限
        pname: '',
        projectId: '' ,
        pjName: '',
        elevatorList: [],
        showDialog1: false,
        showDialog2: false,
        dialogTitle: '',
        sevenDaysWarn: null,
        sevenDaysWarnOption: null,
        sevenDaysWarnOptions: {
          data: [],
          color: ['#33cadb', '#60bbf2', '#48dba4', '#afe551', '#a3c3fe', '#cbf1f4', '#d4c054', '#d49054', '#54a8d4', '#546fd4', '#7e54d4', '#b154d4', '#5472d4'],
        },
        everyWarnTimes: null,
        everyWarnTimesOption: null,
        everyWarnTimesOptions: {
          time: [],
          data: [],
          color: '#33cadb'
        },
        towerItem: {},
        today:''
      }
    },
    mounted () {
      if (this.currentUser.type === 1) {
        this.projectId = this.$route.query.id
        this.pjName = this.$route.query.name
      } else {
        this.projectId = ''
        this.pjName = ''
      }
      if (this.currentUser.type === 1) {
        this.pname = '【' +  this.$route.query.name + '】'
      } else {
        this.pname = ''
      }
      this.getAuth()
      this.getSevenDays()
      this.getTowerList()
    },
    methods: {
      getAuth () {
        let menus = this.$local.get('childMenus')
        if (menus) {
          // 是否拥有项目维护权限
          this.projectManageMmaintain = menus.some((item) => item.funCode === 'p_tcMonitor_maintain')
          //this.projectManageMmaintain = true
        }
      },
      getTowerList () {
        // 获取塔吊监控列表
        getMonitorList({
          coId: this.currentUser.coId,
          projectId: this.projectId,
          mid: this.currentUser.mid
        }).then(res => {
          this.elevatorList = res.data
        }).catch( err => {
          console.log(err)
        })
      },
      getSevenDays () {
        getTowerAlarmLastWeek({
          coId: this.currentUser.coId,
          projectId: this.projectId,
          mid: this.currentUser.mid
        }).then( res => {
          // 近七天塔吊空间报警统计
          this.sevenDaysWarnOptions.data = [
            {name: '超重', value: res.data.towerAlarmLastWeek.overweightcount,label: {show:true}, labelLine: {show: true} },
            {name: '防碰撞', value: res.data.towerAlarmLastWeek.knockcount,label: {show:true}, labelLine: {show: true} },
            {name: '限位', value: res.data.towerAlarmLastWeek.limitlocationcount,label: {show:true}, labelLine: {show: true} },
            {name: '限行区', value: res.data.towerAlarmLastWeek.limitareacount,label: {show:true}, labelLine: {show: true} },
            {name: '风速', value: res.data.towerAlarmLastWeek.windcount,label: {show:true}, labelLine: {show: true} },
            {name: '倾斜', value: res.data.towerAlarmLastWeek.anglecount,label: {show:true}, labelLine: {show: true} }
          ]
           for (let i = 0; i < this.sevenDaysWarnOptions.data.length; i++) {
            if (this.sevenDaysWarnOptions.data[i].value == 0) {
              this.sevenDaysWarnOptions.data[i].labelLine.show = false
              this.sevenDaysWarnOptions.data[i].label.show = false
            }
          }
          this.sevenDaysWarnOptions.allAlarm =  res.data.towerAlarmLastWeek.alarmcount || 0
          this.sevenDaysWarnOption = pie(this.sevenDaysWarnOptions)
          this.sevenDaysWarn = this.$Echarts.init(this.$refs.sevenDaysWarn);
          this.sevenDaysWarn.setOption(this.sevenDaysWarnOption)
          this.everyWarnTimesOptions.time = []
          this.everyWarnTimesOptions.data = []
          for (let i = 0; i < res.data.towerAlarmLastWeekByDay.length; i++) {
            let time = this.$moment(res.data.towerAlarmLastWeekByDay[i].reportDate).format('MM.DD')
            this.everyWarnTimesOptions.time.push(time)
            this.everyWarnTimesOptions.data.push(res.data.towerAlarmLastWeekByDay[i].alarmcount)
          }
          this.everyWarnTimesOptions.time[this.everyWarnTimesOptions.time.length - 1] = '昨天'
          this.everyWarnTimesOption = bar(this.everyWarnTimesOptions)
          this.everyWarnTimes = this.$Echarts.init(this.$refs.everyWarnTimes);
          this.everyWarnTimes.setOption(this.everyWarnTimesOption)
          window.onresize = () => {
            this.sevenDaysWarn.resize()
            this.everyWarnTimes.resize()
          }
        }).catch( res => {
          console.log(res)
        })
      },
      files (item) {
        // 设备档案弹窗
        if (item) {
          this.towerItem = item
          this.dialogTitle = '设备档案（塔吊）'
        } else {
          this.towerItem = {}
          this.dialogTitle = '新增塔吊'
        }
        if (this.currentUser.type !== 1 && this.projectManageMmaintain) {
          this.showDialog1 = true
        } else {
          this.showDialog2 = true
        }
      },
      refresh () {
        this.getSevenDays()
        this.getTowerList()
      },
      gopage (url, type, id, name, pid,pname) {
        this.$router.push({ path: url, query: { t: type, Id: id, code: name, pjId: pid, pjName: pname }})
      },
      close () {
        this.showDialog1 = false
        this.showDialog2 = false
      }
    }
}
</script>

<style lang="scss" scoped>
  .main {
    .environment-header{
      height: 60px;
      line-height: 30px;
      padding: 15px 20px 17px 20px;
      box-sizing: border-box;
      border-bottom: 1px $color-line solid;
      .head-right  {
        position: relative;
        z-index: 6;
      }
    }
    >div {
      .top-tit {
        margin: 20px 20px 10px 0;
        padding-left: 5px;
        border-left: 2px solid #22a6b5;
      }
      .left-top-tit {
        margin-left: 20px;
      }
    }
    .left-content {
      width: 72%;
      .elevatorList {
        padding: 0 0 0 20px;
        .elevator-box {
          float: left;
          width: 33%;
          height: 152px;
          margin-bottom: 10px;
          .item-con {
            position: relative;
            border: 1px solid #ddd;
            height: 142px;
            margin-right: 10px;
            padding: 10px 10px 0;
            overflow: hidden;
            .topTip {
              position: absolute;
              top: 8px;
              right: -25px;
              background: #e6e6e6;
              color: #8f8f8f;
              font-size: 12px;
              padding: 5px 30px;
              transform:rotate(45deg);
            }
            .elevatorIcon {
              background: #0089e4;
              padding: 4px;
              color: #fff;
            }
            .offIcon {
              background: #b5b5b5;
              color: #fff;
            }
            .today-info {
              margin: 20px 10px 10px;
              table {
                width: 100%;
                font-weight: bold;
                font-size: 12px;
                tr:nth-child(2) {
                  height: 25px;
                  color: #939997;
                  font-weight:500;
                }
                td {
                  text-align: center;
                }
              }
            }
            .lichang {
              overflow: hidden;
              margin: 10px;
              font-size: 12px;
              padding: 10px;
              >div {
                float: left;
                color: #8f8f8f;
                line-height: 22px;
                span {
                  color: #414141;
                }
              }
              .leftside {
                width: 70%;
                text-align: left;
              }
              .rightside {
                width: 30%;
                text-align: right;
              }
            }
            .footer {
              background: #fafafa;
              position: absolute;
              bottom: 0;
              width: 100%;
              height: 48px;
              line-height: 48px;
              margin-left: -10px;
              i {
                color: $color;
                display: inline-block;
                vertical-align: top;
              }
              .driver {
                width: 60px;
                display: inline-block;
                height: 48px;
                overflow: hidden;
                word-break:keep-all;
                white-space:nowrap;
                text-overflow:ellipsis;
              }
              span {
                display: inline-block;
                line-height: 48px;
              }
              button {
                color: $color;
                font-size: 12px;
                border: 0;
                width: 80px;
                height: 100%;
                background: transparent;
                padding: 0;
                position: relative;
                z-index: 6;
              }
            }
            >div:nth-child(3) {
              button {
                color: #22a6b5;
                background: transparent;
                font-size: 12px;
              }
            }
          }
        }
      }
    }
    .right-content {
      width: 28%;
      .right-main {
        border: 1px solid #ddd;
        padding: 20px 15px;
        height: 550px;
        position: relative;
        button {
          width: 90%;
          position: absolute;
          bottom: 20px;
          height: 36px;
          left: 5%;
          z-index: 6;
        }
      }
    }
  }
</style>
